<template>  
    <div style="display: inline-block">
        <!--正常输入框-->
        <template v-if = "type==='text'">
            <input type="text" class="normal" v-model="edit_val" @change ="sentval(edit_val,$event)">
        </template>
        <!-- 下拉框 -->
        <template v-else-if="type === 'select'">
            <select  v-model="edit_val"   @change="sentval(edit_val, $event)" >
                <option   v-for="(item, index) in emums"  :value="item" :key="index" >
                  {{item}}
                </option>
            </select>
        </template>
        <!-- textarea -->
        <template v-else-if="type ==='textarea'">
            <textarea rows="4" v-model="edit_val" @change="sentval(edit_val,$event)"></textarea>
        </template>
        <!-- IP输入框 -->
        <template v-else-if ="type ==='ipinput'">
            <div class="input_wrap">     
                <input v-model="ips.a" maxlength="3" class="ip_input" type="number" @keyup="upnext($event)" @keydown="nextInput($event)" @change="getIPVal($event)"  @focus = "focusStyle($event)" @paste = "copy($event)"> . 
                <input v-model="ips.b" maxlength="3" class="ip_input" type="number" @keyup="upnext($event)" @keydown="nextInput($event)" @change="getIPVal($event)"  @focus = "focusStyle($event)"> . 
                <input v-model="ips.c" maxlength="3" class="ip_input" type="number" @keyup="upnext($event)" @keydown="nextInput($event)" @change="getIPVal($event)"  @focus = "focusStyle($event)"> .
                <input v-model="ips.d" maxlength="3" class="ip_input" type="number" @keyup="upnext($event)" @keydown="nextInput($event)" @change="getIPVal($event)"  @focus = "focusStyle($event)">
            </div>
        </template>  
        <!-- mac输入框 -->
        <template v-else-if ="type ==='macinput'">
             <div class="input_wrap">
                <input v-model="macs.a" maxlength="2" class="mac_input" type="text" @keydown="nextInput($event)" @keyup="upnext($event)" @change = "getMacVal($event)" @focus = "focusStyle($event)"  @paste = "copy($event)" > : 
                <input v-model="macs.b" maxlength="2" class="mac_input" type="text" @keydown="nextInput($event)" @keyup="upnext($event)" @change = "getMacVal($event)" @focus = "focusStyle($event)"> : 
                <input v-model="macs.c" maxlength="2" class="mac_input" type="text" @keydown="nextInput($event)" @keyup="upnext($event)" @change = "getMacVal($event)" @focus = "focusStyle($event)"> :
                <input v-model="macs.d" maxlength="2" class="mac_input" type="text" @keydown="nextInput($event)" @keyup="upnext($event)" @change = "getMacVal($event)" @focus = "focusStyle($event)"> :
                <input v-model="macs.e" maxlength="2" class="mac_input" type="text" @keydown="nextInput($event)" @keyup="upnext($event)" @change = "getMacVal($event)" @focus = "focusStyle($event)"> :
                <input v-model="macs.f" maxlength="2" class="mac_input" type="text" @keydown="nextInput($event)" @keyup="upnext($event)" @change = "getMacVal($event)" @focus = "focusStyle($event)">
            </div>	
        </template>
        <!-- checkBox -->
        <template v-else-if ="type ==='checkinput'">
            <div style="display: flex;align-items: center;">
                <div v-for="(item ,index) in emums" style="margin-right: 10px;" :key="index">
                    <input type="checkbox" :disabled='disabled' :checked = "checkCheckedStatus(item.label)" @change="changecheckVal(item.label,$event)">
                    <span :style="disabled?'color:#e2e2e2':''">{{item.label}}</span>
                </div> 
            </div>                
        </template>
        <!-- 特殊IP -->
        <template v-else-if ="type ==='sipinput'">  
            <div class="input_wrap" style="width: 220px;">
                <input v-model="sips.a" maxlength="3" class="ip_input" type="number" @keyup="upnext($event)" @keydown="nextInput($event)" @change="getSIPVal($event)"  @focus="focusStyle($event)" @paste="copy($event)"> . 
                <input v-model="sips.b" maxlength="3" class="ip_input" type="number" @keyup="upnext($event)" @keydown="nextInput($event)" @change="getSIPVal($event)"  @focus="focusStyle($event)"> . 
                <input v-model="sips.c" maxlength="3" class="ip_input" type="number" @keyup="upnext($event)" @keydown="nextInput($event)" @change="getSIPVal($event)"  @focus="focusStyle($event)"> .
                <input v-model="sips.d" maxlength="3" class="ip_input" type="number" @keyup="upnext($event)" @keydown="nextInput($event)" @change="getSIPVal($event)"  @focus="focusStyle($event)">/
                <input v-model="sips.e" maxlength="2" class="ip_input" type="number" @keyup="upnext($event)" @keydown="nextInput($event)" @change="getSIPVal($event)" @focus="focusStyle($event)">
            </div>
        </template>
        <!-- 日志 -->
        <template v-else-if="type ==='logs'">
            <div>
                <ul class="logLabel">
                    <li>
                        <label class="labels">日志类型：</label>									
                        <span class="line"></span>									
                        <input  :disabled="disabled" style="margin-left: 10px;" type="checkbox" :checked ="checkAllStatus"  @click='checkedall($event)' />
                        <label  style=" font-weight: 500; margin-left: 3px;">全选</label>
                        <span class="mi">（* 不能少于一种）</span>	
                    </li>													
                </ul>
                <ul class="logs">
                    <li>
                        <input type="checkbox" :disabled="disabled" :checked="String(this.logs).indexOf(1)>=0" @change="logsVal('1',$event)"/>
                        <label >渗透日志</label>
                    </li>
                    <li>
                        <input type="checkbox"  :disabled="disabled" :checked="String(this.logs).indexOf(4)>=0"  @change="logsVal('4',$event)"/>
                        <label >主机下线日志</label>
                    </li>
                    <li>
                        <input type="checkbox"  :disabled="disabled" :checked="String(this.logs).indexOf(5)>=0"  @change="logsVal('5',$event)"/>
                        <label>封堵日志</label>
                    </li>
                    <li>
                        <input type="checkbox"  :disabled="disabled" :checked="String(this.logs).indexOf(6)>=0"  @change="logsVal('6',$event)"/>								
                        <label >解封日志</label>
                    </li>							
                    <br/>							
                    <li>
                        <input type="checkbox"  :disabled="disabled"  :checked="String(this.logs).indexOf(8)>=0" @change="logsVal('8',$event)"/>
                        <label >命令日志</label>
                    </li>
                    <li>
                        <input type="checkbox"  :disabled="disabled" :checked="String(this.logs).indexOf(7)>=0" @change="logsVal('7',$event)"/>								
                        <label >主机变换日志</label>
                    </li>								
                    <li>
                        <input type="checkbox"  :disabled="disabled" :checked="String(this.logs).indexOf(9)>=0" @change="logsVal('9',$event)"/>					
                        <label >事件日志</label>
                    </li>
                </ul>		
            </div>      
        </template>
    </div>  		
</template>
<script>
import formatTest from 'libs/formatTest'
export default {
     props:{
       type:{
           type:String
       },
       empty:{
           type: Boolean,
       },
       special:{
           type: Boolean
       },
       name:{
           type:String,
       },
       regex:{},
       emums:{
           type:Array,
       },
       val:{},
       disabled:{},
       id:{},
       index:{}
    },
    data() {
        return{ 
            edit_val: this.val,
            checkbox_val: this.val&&this.type=='checkinput'?
                this.val.split("，"):[],
            ips: this.val&&this.type=='ipinput'?{
                a: this.val.split('.')[0], 
                b: this.val.split('.')[1],
                c: this.val.split('.')[2],
                d: this.val.split('.')[3]
            }: { a: '', b: '', c: '', d: ''},
            sips: this.val&&this.type=='sipinput'?{
                a: this.val.split('.')[0], 
                b: this.val.split('.')[1],
                c: this.val.split('.')[2],
                d: this.val.split('.')[3].split('/')[0],
                e: this.val.split('.')[3].split('/')[1]
            }: { a: '', b: '', c: '', d: '',e: ''},
            macs: this.val&&this.type=='macinput'?{
                a: this.val.split(':')[0],
                b: this.val.split(':')[1],
                c: this.val.split(':')[2],
                d: this.val.split(':')[3],
                e: this.val.split(':')[4],
                f: this.val.split(':')[5]
                }: {a: '',b: '',c: '',d: '',e: '',f: ''},
            logs: this.val&&this.type=='logs'?this.val.split(','): []
        }
    },
    watch:{
        val() {   
            this.edit_val=this.val
            if (this.type=='ipinput') {
                this.putIPVal(this.edit_val)
            } else if (this.type=='sipinput') {
                this.putSIPVal(this.edit_val)
            } else if (this.type=='macinput') {
                this.putMacVal(this.edit_val)
            }else if (this.type=='logs') {
                this.logs = this.val&&this.type=='logs'?this.val.split(','): []
            }
        }
       
    },
    computed:{
        checkAllStatus() {  
            return this.logs.length>=7
        },
    },
    methods:{
        logsVal(val,event) {
            let nohas = true        
            for(let [k,v] of this.logs.entries()) {
                if (v==val) {
                   this.logs.splice(k,1)
                   nohas = false
                }
            }
            if (nohas) {       
                this.logs = [...this.logs,val]
            } 
            let log_str = this.logs.join(',')
            this.sentval(log_str,event)
        },
        checkedall(event) {
            if (this.logs.length<7) {
                this.logs = ['1','4','5','6','7','8','9']
            } else {
                this.logs = []
            }   
            let log_str = this.logs.join(',')  
            this.sentval(log_str,event)
        },
        checkCheckedStatus(val) {  
           return String(this.checkbox_val).indexOf(val) >= 0
        },
        changecheckVal(val,event) {
            let index = -1  
            for(let [k,v] of  this.checkbox_val) {
                if (v==val) {
                    index = k
                }
            }
            if (index>=0) {
                this.checkbox_val.splice(index,1)
            } else {
                this.checkbox_val = [...this.checkbox_val,val]
            }
            let checkbox_val = this.checkbox_val.join(',')
            this.sentval(checkbox_val,event)
        },
        sentval(val,event) {
            let ele = null
            if (this.type=='ipinput'||this.type=='macinput'||this.type=='sipinput') {
                ele =  $(event.currentTarget).parent()
                if (val==':::::'||val=='...'||val=='.../') {
                    val =""
                }
            } else if (this.type=='checkinput') {
                ele =  null
            } else {
                ele =  $(event.currentTarget)
            }
            let format = this.testFormat(val,ele)
            this.$emit('getVal',this.name,val,format,this.id)
        },
        testFormat(val,ele) {
            if (this.regex==null||this.regex.test(val)||!val) {
                $(ele).removeClass('error_foramt')
                return true
            } else {
                $(ele).addClass(' error_foramt')
                return false
            }   
        },
        putIPVal(val) {
           if (!val) {
                this.ips.a = ''
                this.ips.b = ''
                this.ips.c = ''
                this.ips.d = ''
                return
           }
           let val_arr = val.split('.')
           this.ips.a = val_arr[0]
           this.ips.b = val_arr[1]
           this.ips.c = val_arr[2]
           this.ips.d = val_arr[3]
        },
        putSIPVal(val) {
            if (!val) {
                this.sips.a = ''
                this.sips.b = ''
                this.sips.c = ''
                this.sips.d = ''
                this.sips.e = ''
                return
           }
           let val_arr = val.split('.')
           this.sips.a = val_arr[0]
           this.sips.b = val_arr[1]
           this.sips.c = val_arr[2]
           this.sips.d = val_arr[3].split('/')[0]
           this.sips.e = val_arr[3].split('/')[1]
        },
        putMacVal(val) {
           if (!val) {
               this.macs.a = ''
                this.macs.b = ''
                this.macs.c = ''
                this.macs.d = ''
                this.macs.e = ''
                this.macs.f = ''
                return
           }
           let val_arr = val.split(':')
           this.macs.a = val_arr[0]
           this.macs.b = val_arr[1]
           this.macs.c = val_arr[2]
           this.macs.d = val_arr[3]
           this.macs.e = val_arr[4]
           this.macs.f = val_arr[5]
        },
        getIPVal(event) {
            let ip_val = this.ips.a +"."+this.ips.b+"."+this.ips.c+"."+this.ips.d 
            this.sentval(ip_val,event)   
        },
        getSIPVal(event) {
            let ip_val = this.sips.a +"."+this.sips.b+"."+this.sips.c+"."+this.sips.d+"/"+ this.sips.e
            this.sentval(ip_val,event)   
        },
        getMacVal($event) {
            let mac_val = this.macs.a+":"+this.macs.b+":"+this.macs.c+":"+this.macs.d+":"+this.macs.e+":"+this.macs.f
            this.sentval(mac_val,event)
        },
        focusStyle(event) {
          let parent=  $(event.currentTarget).parent()
          parent.removeClass("error_foramt")
        },
        copy(event) {
            event.preventDefault()
            let content =  $('.copyText').html()
            if (this.type =="ipinput") {
                this.putIPVal(content)
                this.getIPVal(event)
            } else if (this.type=="macinput") {
                this.putMacVal(content)
                this.getMacVal(event)
            }
        },
        nextInput(event) {            
            if ((this.type=='ipinput'&&event.keyCode==69)||event.keyCode==229) {
                 event.preventDefault()        
             } //不能输入字母e            
            if (event.keyCode==110||event.keyCode==190) {//.
               event.preventDefault()
               let val = $(event.currentTarget).val() 
               if (val) {
                   $(event.currentTarget).next().focus() 
                   $(event.currentTarget).next().select()
               }
            } 
            if (event.keyCode==39) {//right
               event.preventDefault()
               $(event.currentTarget).next().focus() 
               $(event.currentTarget).next().select()
            } 
            if (event.keyCode==37) {//left
                event.preventDefault()
               $(event.currentTarget).prev().focus()
               $(event.currentTarget).prev().select()    
            } 
            if ($(event.currentTarget).val().length==0&&event.keyCode==8) {//backspace
                event.preventDefault()
                $(event.currentTarget).prev().focus()  
                $(event.currentTarget).prev().select() 
                return     
            }
            $(event.currentTarget).val($(event.currentTarget).val().slice(0,3))
        },
        upnext(event) {   //自动下一个
            let max_long = false
            if (this.type=='macinput') {
               max_long = $(event.currentTarget).val().length > 1
            } else {
               max_long = $(event.currentTarget).val().length > 2
            }             
            if (max_long && (event.keyCode != 37) && (event.keyCode != 39) && (event.keyCode != 8)) {
                $(event.currentTarget).next().focus()   
                $(event.currentTarget).next().select() 
                $(event.currentTarget).val($(event.currentTarget).val().slice(0,3))
                return    
            }   
            
        },

    }
}

</script>
<style scoped lang="less">
.normal,select,textarea{
    width: 180px;  
    border: 1px solid  #e8e8e8;
    border-radius: 3px;
    box-sizing: border-box;
    padding: 0 10px;
}
textarea{
    resize: vertical;
    max-height: 500px;
}
.normal,select{
    height: 25px;
}
.error_foramt{
    border: 1px solid  #b63039;
}
/*日志类型*/
.line {
    border-left: 1px solid #E0E0E0;
    height: 15px;
    vertical-align: middle;
}
.logs {
    display: flex;
    vertical-align: top;
    margin-left: 70px;
    margin-top: 10px;
    width: 600px;
    flex-wrap: wrap;
}
.logs label {		
    font-weight: 500;
    margin-left: 3px;	
}
.logs li {
    display: flex;
    align-items: center;
    border: 1px solid #E2E2E2;
    border-radius: 3px;
    padding: 4px 10px;
    margin: 0 40px 20px 0;
}
</style>